<template>
	<view>
		<view class="page_header">
			<navigation textAlign="left">养老服务</navigation>
			<view class="page_header_search_panel">
				<image class="page_header_search_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/search.png" mode="aspectFit"></image>
				<input class="page_header_search_input" @confirm="searchText" v-model="searchModel.search" type="text" value="" placeholder="请输入服务名称" placeholder-class="page_header_search_placeholder" />
			</view>
			<view class="picker_panel">
				<picker class="picker" mode="selector" :range="typeList" range-key="name" :value="typeIndexFun" @change="typePickerChange">
					<view class="picker_text">
						{{ typeTextFun }}
						<text class="nursing-icon iconxiala"></text>
					</view>
				</picker>
				<picker class="picker" mode="selector" :range="publicBenefitList" range-key="name" :value="zhengceIndexFun" @change="zcPickerChange">
					<view class="picker_text">
						{{ zhengceTextFun }}
						<text class="nursing-icon iconxiala"></text>
					</view>
				</picker>
				<picker class="picker" mode="selector" :range="pirceList" range-key="name" :value="priceIndexFun" @change="jgPickerChange">
					<view class="picker_text">
						{{ priceTextFun }}
						<text class="nursing-icon iconxiala"></text>
					</view>
				</picker>
				<picker class="picker" mode="selector" :range="serveList" range-key="name" :value="numIndexFun" @change="csPickerChange">
					<view class="picker_text">
						{{numTextFun}}
						<text class="nursing-icon iconxiala"></text>
					</view>
				</picker>
			</view>
		</view>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom">
			<view class="list">
				<view class="list_item" v-for="(listItem, index) in dataList" :key="index" @tap="toDetail(listItem)">
					<image class="image" :src="listItem.image" mode=""></image>
					<view class="info">
						<view class="info_header">
							<viwe class="title">
								<view class="titile_text">{{ listItem.name }}</view>
								<view class="sign green" v-if="listItem.zhengce == $enums['服务政策']['公益']">公益</view>
								<view class="sign orange" v-if="listItem.zhengce == $enums['服务政策']['常规']">常规</view>
							</viwe>
							<view class="pirce" v-if="listItem && listItem.money > 0">￥{{ listItem.money | toFixed(2) }}/次</view>
							<view class="pirce gratis" v-else>免费</view>
						</view>
						<view class="info_container">
							<view class="text">{{ listItem.content }}</view>
						</view>
						<veiw class="info_footer">
							<view class="organization">·{{ listItem.companyName }}</view>
							<view class="count">{{ listItem.count }}人购买</view>
						</veiw>
					</view>
				</view>
			</view>
			<view class="no-data">
				<view class="more"><uni-load-more :status="moreStatus" :content-text="moreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import * as userServeApi from '@/api/userApi/serve.js';
import { uniLoadMore } from '@dcloudio/uni-ui';
export default {
	components: {
		uniLoadMore
	},
	computed: {
		typeIndexFun() {
			return this.typeList.findIndex(item => item['id'] == this.searchModel.type);
		},
		typeTextFun() {
			if (this.typeIndexFun < 0) return '服务类型';
			else return this.typeList[this.typeIndexFun]['name'];
		},
		zhengceIndexFun() {
			return this.publicBenefitList.findIndex(item => item['id'] == this.searchModel.zhengce);
		},
		zhengceTextFun() {
			if (this.zhengceIndexFun < 0) return '服务政策';
			else return this.publicBenefitList[this.zhengceIndexFun]['name'];
		},
		priceIndexFun() {
			return this.pirceList.findIndex(item => item['id'] == this.searchModel.moneyDesc);
		},
		priceTextFun() {
			if (this.priceIndexFun < 1) return '价格';
			else return this.pirceList[this.priceIndexFun]['name'];
		},
		numIndexFun() {
			return this.serveList.findIndex(item => item['id'] == this.searchModel.serviceNum);
		},
		numTextFun() {
			if (this.numIndexFun < 1) return '服务次数';
			else return this.serveList[this.numIndexFun]['name'];
		}
	},
	data() {
		return {
			$enums: this.$enums,
			typeSerchModel: {
				type: this.$enums['服务类型分类']['养老服务']
			},
			typeList: [],
			searchModel: {
				search: '',
				type: '',
				zhengce: 1,
				moneyDesc: null,
				serviceNum: null,
				current: 1,
				size: 10
			},
			publicBenefitList: [
				{
					id: 1,
					name: '常规'
				},
				{
					id: 0,
					name: '公益'
				}
			],

			pirceList: [
				{
					id: null,
					name: '全部'
				},
				{
					id: 0,
					name: '由低到高'
				},
				{
					id: 1,
					name: '由高到低'
				}
			],
			serveList: [
				{
					id: null,
					name: '全部'
				},
				{
					id: 0,
					name: '由低到高'
				},
				{
					id: 1,
					name: '由高到低'
				}
			],
			dataList: [],
			// more
			moreStatus: 'more',
			moreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			}
		};
	},
	created() {
		// this.getTypeAllList();
	},
	methods: {
		typePickerChange(e) {
			let index = e.detail.value;
			this.searchModel.type = this.typeList[index].id;
			this.$set(this.searchModel,'current',1);
			this.getDateList();
		},
		zcPickerChange(e) {
			let index = e.detail.value;
			this.searchModel.zhengce = this.publicBenefitList[index].id;
			this.$set(this.searchModel,'current',1);
			this.getDateList();
		},
		jgPickerChange(e) {
			let index = e.detail.value;
			this.searchModel.moneyDesc = this.pirceList[index].id;
			this.$set(this.searchModel,'current',1);
			this.getDateList();
		},
		csPickerChange(e) {
			let index = e.detail.value;
			this.searchModel.serviceNum = this.serveList[index].id;
			this.$set(this.searchModel,'current',1);
			this.getDateList();
		},
		toDetail(data) {
			uni.navigateTo({
				url: `/pages/serve/serveDetail/serveDetail?id=${data.id}`
			});
		},
		// 滑动到底部。分页处理
		scrollBottom() {
			this.getDateList();
		}, 
		searchText(){
			this.searchModel.current = 1;
			this.getDateList();
		},
		getDateList() {
			this.moreStatus = 'loading';
			userServeApi
				.queryPension(this.searchModel)
				.then(res => {
					if (res.code === 0) {
						if (this.searchModel.current == 1) {
							this.dataList = [];
						}
						if (res.data && res.data.length == 10) {
							this.moreStatus = 'more';
							this.searchModel.current += 1;
							this.dataList = [...this.dataList, ...res.data];
						} else if (res.data && res.data.length < 10) {
							this.moreStatus = 'noMore';
							this.searchModel.current += 1;
							this.dataList = [...this.dataList, ...res.data];
						} else {
							this.moreStatus = 'noMore';
						}
					}
				})
				.catch(e => {
					this.paymentMoreStatus = 'noMore';
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		getTypeAllList() {
			userServeApi
				.getServeType(this.typeSerchModel)
				.then(res => {
					if (res.code === 0) {
						if (res.data && res.data.length > 0) {
							this.typeList = res.data;
							this.searchModel.type = res.data[0].id;
							this.getDateList();
						}
					}
				})
				.catch(e => {
					if(e.msg){
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
					}else{
						uni.showToast({
							title: e.message,
							icon: 'none',
							duration: 1000
						});
					}
				});
		}
	}
};
</script>

<style lang="stylus" scoped>
.page_scroll
	position absolute
	top calc(283rpx + var(--status-bar-height))
	right 0rpx
	bottom 0rpx
	left 0rpx
	background-color #FFFFFF
.picker_panel
	width 100%
	height 80rpx
	display flex
	align-items center
	justify-content space-between
	background-color #FFFFFF
	margin-top 20rpx
	.picker
		flex 1
		height 80rpx
		font-size 24rpx
		font-family PingFang SC
		font-weight 400
		color #999999
		.picker_text
			width 100%
			height 80rpx
			display flex
			align-items center
			justify-content center
			.nursing-icon
				font-size 14rpx
				margin-left 5rpx
.list
	width 100%
	background-color #FFFFFF
	.list_item
		width 100%
		display flex
		justify-content space-between
		padding 30rpx 32rpx
		box-sizing border-box
		&:first-child
			padding-top 0rpx
		.image
			width 204rpx
			height 204rpx
			border-radius 23rpx
		.info
			flex 1
			margin-left 20rpx
			box-sizing border-box
			display flex
			flex-direction column
			justify-content space-between
			.info_header
				width 100%
				display flex
				justify-content space-between
				.title
					flex 1
					margin-right 10rpx
					letter-spacing 1rpx
					font-size 32rpx
					font-family PingFang SC
					font-weight 400
					color #333333
					display flex
					.titile_text
						flex 1
						overflow hidden
						text-overflow ellipsis
						display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
						-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						-webkit-line-clamp 1 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
						word-wrap break-word
					.sign
						margin-left 10rpx
						font-size 28rpx
						font-family PingFang SC
						font-weight 400
						color #FFFFFF
						padding 4rpx
						border-radius 8rpx
						transform scale(0.7)
					.green
						background-color rgba(0, 181, 0, 1)
					.orange
						background-color rgba(246, 132, 21, 1)
				.pirce
					font-size 32rpx
					font-family PingFang SC
					font-weight bold
					color #FF4200
				.gratis
					color rgba(51, 51, 51, 1)
			.info_container
				flex 1
				margin-top 15rpx
				font-size 24rpx
				letter-spacing 1rpx
				font-family PingFang SC
				font-weight 400
				color #999999
				.text
					overflow hidden
					text-overflow ellipsis
					display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
					-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					-webkit-line-clamp 2 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
					word-wrap break-word
			.info_footer
				margin-top 10rpx
				display flex
				justify-content space-between
				.organization
					background-color rgba(37, 143, 255, 0.1)
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #4594FF
					border-radius 10rpx
					padding 3rpx 8rpx
				.count
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #999999
</style>
